﻿@{
    ViewBag.Title = "CreatePage";
}

<style type="text/css">
    .clearfix:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
			 
	.clearfix {
		display: block;
	}
			 
	html[xmlns] .clearfix {
		display: block;
	}
			 
	* html .clearfix {
		height: 1%;
	}

	.dk-container {
	    border:1px solid #AAA; margin:-1px;
	    background-color: #EEE;
	}
	
	#webpage-designer .dk-container {
	    height: 100px;
	}
	
	#dk-selected {
	    background-color: #FF6600;
	}
	#dk-selected .dk-leaf {
	    background-color: #FF6600;
	}
	.dk-left {
	    float: left;
	}
	
	.dk-right {
	    float: right;
	}
	
	.dk-leaf {
	    background-color: #CCFFCC;        
	}
</style>

<div>
    <input id="root-container" type="button" value="插入根容器" />
    <input id="binary-container" type="button" value="拆分容器"/>
    <input id="child-container" type="button" value="插入容器" />

    <input id="del-binary-container" type="button" value="删除容器" />

    <input id="leaf-containers" type="button" value="页容器" />
    <table>
        <tr>
            <th>宽度</th>
            <td id="dk-current-width"></td>
        </tr>
        <tr>
            <th>高度</th>
            <td id="dk-current-height"></td>
        </tr>
        <tr>
            <th>路径</th>
            <td id="dk-current-path"></td>
        </tr>
    </table>
</div>

<br />

<div id="webpage-designer">
    <div class="dk-container clearfix" style="width:960px;height:200px;">
        <div class="dk-container dk-left dk-leaf" style="height:100px; width:160px;">
        </div>
        <div class="dk-container dk-right clearfix" style="width:800px;height:200px;">
            <div class="dk-container dk-left dk-leaf" style="height:200px;width:400px;">
            </div>
            <div class="dk-container dk-right dk-leaf" style="height:200px;width:400px;">
            </div>
        </div>
    </div>

    <div class="dk-container dk-leaf clearfix">
        
    </div>

    <div class="dk-container" style="width:960px;height:400px;">
        <div class="dk-container dk-leaf clearfix">
        </div>
        <div class="dk-container dk-leaf clearfix">
        </div>
        <div class="dk-container clearfix" style="height:200px;">
            <div class="dk-container dk-left dk-leaf" style="height:100px; width:160px;">
            </div>
            <div class="dk-container dk-right clearfix" style="width:800px;height:200px;">
                <div class="dk-container dk-left dk-leaf" style="height:200px;width:400px;">
                </div>
                <div class="dk-container dk-right dk-leaf" style="height:200px;width:400px;">
                </div>
            </div>
        </div>
    </div>
</div>

@using (Html.BeginForm())
{ 
    <input id="hidPaths" name="paths" type="hidden" />
    <input id="btn-createPage" type="submit" value="提交" />
}

<script type="text/javascript">

    var currentContainer = {};

    $(document).ready(function () {

        initContainer = function () {
            $('.dk-container').unbind('click');
            $('.dk-container').click(function () {
                var me = $(this);
                var path = { path: '' };
                getPath(me, path);
                $('#dk-current-path').html(path.path);
                $('.dk-container').each(function (index, el) {
                    $(el).removeAttr('id');
                });

                me.attr('id', 'dk-selected');
                readContainer(me);

                if (isBinary(me)) {
                    $('#binary-container').attr('disabled', 'disabled');
                    $('#child-container').attr('disabled', 'disabled');
                } else {
                    $('#binary-container').removeAttr('disabled');
                    $('#child-container').removeAttr('disabled');
                }

                currentContainer = me;
                return false;
            }).each(function (index, el) {
                var t = (new Date()).getTime();
                if ($(el).children('input[type="hidden"]').length == 0) {
                    $(el).append('<input type="hidden" value="' + t + '-' + index + '"/>');
                }
            });

        };

        var resizeContainer = function (el) {
            var pEl = el.parent();
            if (pEl != null && pEl.hasClass('dk-container')) {
                var ph = parseInt(pEl.css('height'));
                var elh = parseInt(el.css('height'));
                if (ph < elh) {
                    pEl.css('height', elh);
                } else {
                    var h = 0, w = 0, bh = 0, ph = 0;
                    pEl.children('.dk-container').each(function (index, c) {
                        var jc = $(c);
                        var ch = parseInt(jc.css('height'));
                        h = ch > h ? ch : h;

                        if (jc.hasClass('dk-left') || jc.hasClass('dk-right')) {
                            w += parseInt(jc.css('width'));
                            bh += ch;
                        } else if (jc.hasClass('dk-leaf')) {
                            ph += ch;
                        }
                    });
                    bh = bh < ph ? ph : bh;
                    h = h < ph ? ph : h;
                    if (w > parseInt(pEl.css('width'))) {
                        pEl.css('height', bh);
                    } else {
                        pEl.css('height', h);
                    }
                }

                resizeContainer(pEl);
            }

            readContainer(el);
        }

        var isBinary = function (el) {
            return el.children('.dk-left').length > 0;
        }

        var getPath = function (el, path) {

            if (el.hasClass('dk-container')) {
                if (el.hasClass('dk-left')) {
                    if (path.containWidthAndHeight == true) {
                        path.path = '.L(' + parseInt(el.css('width')) + ',' + parseInt(el.css('height')) + ')' + path.path;
                    } else {
                        path.path = '.L' + path.path;
                    }
                    getPath(el.parent(), path);
                } else if (el.hasClass('dk-right')) {
                    if (path.containWidthAndHeight == true) {
                        path.path = '.R(' + parseInt(el.css('width')) + ',' + parseInt(el.css('height')) + ')' + path.path;
                    } else {
                        path.path = '.R' + path.path;
                    }
                    getPath(el.parent(), path);
                } else if (el.parent().attr('id') == 'webpage-designer') {
                    el.parent().children('.dk-container').each(function (index, c) {
                        if (c.innerHTML == el.html()) {
                            if (path.containWidthAndHeight == true) {
                                path.path = 'containers[' + index + '](' + parseInt(el.css('width')) + ',' + parseInt(el.css('height')) + ')' + path.path;
                            } else {
                                path.path = 'containers[' + index + ']' + path.path;
                            }
                        }
                    });
                } else if (!isBinary(el.parent())) {
                    el.parent().children('.dk-container').each(function (index, c) {
                        if (c.innerHTML == el.html()) {
                            if (path.containWidthAndHeight == true) {
                                path.path = '.items[' + index + '](' + parseInt(el.css('width')) + ',' + parseInt(el.css('height')) + ')' + path.path;
                            } else {
                                path.path = '.items[' + index + ']' + path.path;
                            }
                            getPath(el.parent(), path);
                        }
                    });
                }
            }
        }

        var readContainer = function (el) {
            $('#dk-current-width').html(el.css('width'));
            $('#dk-current-height').html(el.css('height'));
        }

        var insertBinaryContainer = function (p) {
            p.append('<div class="dk-container dk-left dk-leaf" style="width:50px;"></div>');
            p.append('<div class="dk-container dk-right dk-leaf" style="width:50px;"></div>');
            p.removeClass('dk-leaf');
            initContainer();
            p.resizable('destroy');
            $('.dk-leaf', p).resizable({
                resize: function (event, ui) {
                    resizeContainer(ui.element);
                    ui.element.click();
                }
            });
        };

        var insertClildContainer = function (p) {
            p.append('<div class="dk-container dk-leaf"><input type="hidden" value="' + (new Date()).getTime() + '"/></div>');
            p.removeClass('dk-leaf');
            p.resizable('destroy');
            $('.dk-leaf', p).resizable({
                resize: function (event, ui) {
                    resizeContainer(ui.element);
                    ui.element.click();
                }
            });
            while (p.hasClass('dk-container')) {
                p.css('height', parseInt(p.css('height')) + 100);
                p = p.parent();
            }
            initContainer();
            currentContainer = $('#dk-selected');
        };

        var deleteContainer = function (el) {
            var p = el.parent();
            if (isBinary(p)) {
                p.html('');
                p.addClass('dk-leaf');
            } else {
                el.resizable('destroy');
                el.html('');
                el.remove();
                if (p.children('.dk-container').length == 0 && p.attr('id') != 'webpage-designer') {
                    p.addClass('dk-leaf');
                }
            }
            if (p.hasClass('dk-leaf')) {
                p.resizable({
                    resize: function (event, ui) {
                        resizeContainer(ui.element);
                        ui.element.click();
                    }
                });
            }
            initContainer();
        }

        var getLeafPaths = function () {

            var paths = [];

            $('.dk-leaf').each(function (index, el) {
                var path = { path: '', containWidthAndHeight: true };
                getPath($(el), path);

                paths.push(path.path);
            });

            return paths;
        }

        initContainer();

        $('.dk-leaf').resizable({
            resize: function (event, ui) {
                resizeContainer(ui.element);
                ui.element.click();
                //alert(1);
            }
        })


        $('#binary-container').click(function () {
            insertBinaryContainer(currentContainer);
        });

        $('#child-container').click(function () {
            insertClildContainer(currentContainer);
        });

        $('#del-binary-container').click(function () {
            deleteContainer(currentContainer);
        });

        $('#root-container').click(function () {
            insertClildContainer($('#webpage-designer'));
        });

        $('#leaf-containers').click(function () {
            alert(getLeafPaths());
        });

        $('#btn-createPage').click(function () {
            var paths = $('#hidPaths');
            paths.val('');
            $(getLeafPaths()).each(function (index, p) {
                paths.val(paths.val() + ';' + p);
            });
        });
    });
</script>